/*
 * @Author: hongbin
 * @Date: 2022-01-03 09:44:43
 * @LastEditors: hongbin
 * @LastEditTime: 2022-01-07 18:19:37
 * @Description: 中国地图
 */
import { FC, ReactElement } from "react";
import ReactEcharts from "echarts-for-react";
import chinaJson from "./china";
// import data from "./data";
import { registerMap } from "echarts";
import { useNavigate } from "react-router-dom";
import { provinces } from "china-map-json-h";
import china from "./china";

interface IProps {}
// @ts-ignore
registerMap("china", chinaJson);

const ChinaMap: FC<IProps> = (): ReactElement => {
  const navigate = useNavigate();

  const randomData = [];

  for (const {
    properties: { name },
  } of chinaJson.features) {
    // 生成随机数据
    if (name) {
      randomData.push({ name, value: Math.floor(Math.random() * 1000) });
    }
  }

  return (
    <ReactEcharts
      option={chartsOption(randomData)}
      style={{
        width: "100%",
        height: "100%",
      }}
      onEvents={{
        click: (e: any) => {
          console.log("click:", e);
          const { name } = e;
          const validName = provinces.hasOwnProperty(name);

          if (!validName) {
            return console.log(name + "没有地图资源");
          }
          // 跳转到省市级别路由
          navigate("city", {
            state: {
              name,
            },
          });
        },
      }}
    />
  );
};

export default ChinaMap;

function chartsOption(data: any) {
  // 计算data的max
  let max = data[0].value;
  for (let i = 1; i < data.length; i++) {
    if (max < data[i].value) {
      max = data[i].value;
    }
  }
  // 凑整
  max = Number("1".padEnd(max.toString().length + 1, "0"));

  const option = {
    backgroundColor: "transparent",
    title: {
      left: "center",
      right: 10,
      text: "",
      textStyle: {
        color: "#fff",
      },
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>确诊人数{c}",
    },
    // legend: {
    //   orient: "horizontal",
    //   y: "bottom",
    //   x: "center",
    //   textStyle: {
    //     color: "#fffae5",
    //   },
    // },
    // geo: {
    //   map: "china",
    //   zoom: 0.8,
    //   scaleLimit: {
    //     min: 0.8,
    //     max: 4,
    //   },
    //   roam: true,
    //   itemStyle: {
    //     areaColor: "#333",
    //     borderColor: "#000",
    //   },
    //   emphasis: {
    //     label: {
    //       show: true,
    //     },
    //     itemStyle: {
    //       areaColor: "#60758e",
    //     },
    //   },
    // },
    visualMap: {
      min: 0,
      max,
      text: ["High", "Low"],
      calculable: true,
      inRange: {
        color: ["lightskyblue", "yellow", "orangered"],
      },
      show: false,
      realtime: false,
    },
    series: [
      {
        type: "map",
        map: "china",
        data,
        roam: true,
        zoom: 0.7,
        scaleLimit: {
          min: 0.7,
          max: 3,
        },
        itemStyle: {
          shadowColor: "rgba(0, 0, 0, 0.3)",
          shadowBlur: 3,
          color: "transparent",

          emphasis: {
            // borderWidth: 2,
            // borderColor: "rgba(0, 0, 0, 0.5)",
            areaColor: "orangered",
            shadowColor: "orangered",
            shadowBlur: 10,
          },
        },
        // center: [115.97, 29.71],
      },
    ],
  };
  return option;
}
const NAME_MAP = [
  "marking_count",
  "low_quality_rate",
  "old_news_rate",
  "vulgar_rate",
];
